<template>
  <div class="history-box">
    <div class="history-top">
      <div class="history-top-title">BP-FOB-1历史调度</div>
      <div class="history-top-tip">
        <InfoCircleFilled :style="{color: '#0062AD', paddingTop: '10px'}"/>
        <span class="tip-text">该货船已经优化 <span :style="{color: '#FA6400'}">12</span> 次</span>
      </div>
    </div>
    <div class="history-body">
      <div class="history-ul">
        <div @click="changeLi(item.key)"
             :class="{'history-li': true,'history-active': activeKey === item.key}"
             :key="item.key" v-for="item in liArr">
          <div class="li-title">
            <div class="li-title-name"> <div class="li-now" v-if="item.isNow">当前调度</div> {{item.title}}</div>
            <span :class="{
              'li-type-1': item.type === '0',
              'li-type-2': item.type === '1'
            }">{{item.type === '0'? '提交失败' : '提交成功'}}</span>
          </div>
          <div class="li-time">{{item.time}}</div>

        </div>
      </div>
      <div class="history-right">
        <div class="history-gantt-box">
          <div class="gantt-box-flex">
            <div class="gantt-header">
              <div class="gantt-title">
                <span>船维度(回国)</span>
              </div>
              <div class="gantt-btn">
                <a-button type="text"> <template #icon><SaveOutlined /></template>保存</a-button>
                <a-button type="text">  <template #icon><SendOutlined /></template>发布</a-button>
              </div>
              <div class="moth-flex">
                <div class="month-item-btn">周</div>
                <div class="month-item-btn">月</div>
                <div class="month-item-btn">季</div>
                <div class="month-item-btn">年</div>
                <div class="month-item-btn">今天</div>
              </div>
            </div>
            <Gantt
                ref="gantt"
                :data="data"
                itemText="货号"
                dateText="序号"
                :activeDate="activeDate"
                :itemWidth="width"
                :itemHeight="height"
                :scheduleTitle="scheduleTitle"
                :dateRangeList="dateRangeList"
                :repeatMode="repeatConfig"
                :dateType="dateType"
                @scheduleClick="onScheduleClick"
                @scrollYEnd="onScrollYEnd"
            />
          </div>
        </div>
        <div class="history-bottom">
          <a-button class="return-btn" @click="goReturn">
            <template #icon>
              <UndoOutlined />
            </template>
            恢复版本
          </a-button>
        </div>

      </div>

    </div>
  </div>
</template>

<script setup>
import {reactive, ref, toRefs} from 'vue';
import { InfoCircleFilled,  SaveOutlined, SendOutlined, UndoOutlined} from '@ant-design/icons-vue';
import Gantt from '../hightChartsGantt/Gantt.vue'
import {fetchThreeDays} from '../hightChartsGantt/util'
import DATA from '../hightChartsGantt/data'
import { useRouter } from "vue-router";
const router = useRouter()
const goReturn = () => {
  router.push({
    path: '/scheduling'
  })
}
const liArr = ref([
  {
    key: '1',
    title: '调度V1-丁筱怡',
    type: '0',
    time: '2012/03/20 18:00',
    isNow: true
  },
  {
    key: '2',
    title: '调度V2-丁筱怡',
    type: '1',
    time: '2012/03/20 18:00',
    isNow: false
  },
  {
    key: '3',
    title: '调度V.3-丁筱怡',
    type: '1',
    time: '2012/03/20 18:00',
    isNow: false
  },
  {
    key: '4',
    title: '调度V4-丁筱怡',
    type: '0',
    time: '2012/03/20 18:00',
    isNow: false
  },
  {
    key: '5',
    title: '调度V5-丁筱怡',
    type: '1',
    time: '2012/03/20 18:00',
    isNow: false
  },
  {
    key: '6',
    title: '调度V6-丁筱怡',
    type: '1',
    time: '2012/03/20 18:00',
    isNow: false
  },
  {
    key: '7',
    title: '调度V7-丁筱怡',
    type: '1',
    time: '2012/03/20 18:00',
    isNow: false
  },
  {
    key: '8',
    title: '调度V8-丁筱怡',
    type: '1',
    time: '2012/03/20 18:00',
    isNow: false
  },
  {
    key: '9',
    title: '调度V.9-丁筱怡',
    type: '0',
    time: '2012/03/20 18:00',
    isNow: false
  },
  {
    key: '10',
    title: '调度V.10-丁筱怡',
    type: '1',
    time: '2012/03/20 18:00',
    isNow: false
  }
])
const activeKey = ref('1')
const changeLi = (key) => {
  activeKey.value = key
}
const dateRangeList = ref([])
const activeDate = ref('2022-02-14')
// eslint-disable-next-line no-unused-vars
const currentRange = fetchThreeDays()
// dateRangeList.value = [currentRange[0], currentRange.at(-1)]
dateRangeList.value = ['2022-02-11', '2022-03-19']
const repeatConfig = reactive({
  mode: 'extract',
  backgroundColor: '#009999',
  textColor: '#CCFFFF',
  name: list => {
    return list.map(item => item.name).join('+')
  },
  desc: list => {
    return list.map(item => item.desc).join('@@@')
  },
})
const scheduleTitle = item => {
  return item.name + 'function'
}

const width = ref(80)
const height = ref(40)
let {dateType } =toRefs(reactive( {
  dateType: 'days'
}))

const data = ref(DATA.data2)

const onScheduleClick = (item) => {
  console.log('点击', item)
  alert(`${item.name}----${item.desc}`)
}

const gantt = ref(null)

const onScrollYEnd = e => {
  console.log('|到底了', e )
}
</script>

<style lang="scss" scoped>
.history-box{
  background: #ffffff;
}
.history-top {
  height: 85px;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #F7F8FA;
  .history-top-title {
    font-size: 28px;
    font-weight: bold;
    text-align: left;
    color: #2c3749;
    line-height: 85px;
    margin-left: 60px;
  }
  .history-top-tip {
    width: 225px;
    height: 32px;
    background: #f7f8fa;
    border-radius: 3px;
    margin-top: 28px;
    margin-left: 60px;
    .tip-text {
      padding-left: 20px;
    }
  }
}
.history-body {
  display: flex;
  width: 100%;
  .history-ul {
    padding: 24px 14px;
    .history-li{
      width: 368px;
      height: 86px;
      background: #ffffff;
      border-bottom: 1px solid #DCDEE0;
      padding: 16px 24px 16px 5px;
      .li-title {
        display: flex;
        justify-content: space-between;
        .li-title-name {
          display: flex;
          font-size: 16px;
          font-weight: bold;
          text-align: left;
          color: #2c3749;
          line-height: 22px;
          letter-spacing: 0.02px;
          .li-now {
            width: 60px;
            height: 20px;
            background: rgba(0, 98, 173, 0.08);
            border-radius: 2px;
            color: #0062AD;
            font-size: 12px;
            text-align: center;
            margin-right: 8px;
          }
        }
        .li-type-1 {
          color: #F5001D;
          font-size: 14px;
        }
        .li-type-2 {
          color: #0062AD;
          font-size: 14px;
        }
      }
      .li-time {
        color: #999999;
        font-size: 14px;
        text-align: left;
        margin-top: 5px;
      }
    }
    .history-active {
      width: 368px;
      height: 86px;
      background: #F7F8FA;
      border-radius: 3px;
    }
  }
  .history-right{
    width:calc(100% - 400px);
    border-left: 1px solid #F7F8FA;
    padding-right: 2%;
    .history-bottom {
      width: 100px;
      margin-left: 24px;
      margin-bottom: 24px;
      .return-btn {
        background: #f7f9fa;
        border: 1px solid #dcdee0;
        border-radius: 2px;
      }
    }

  }
}
.gantt-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #F7F8FA;
  .gantt-title {
    font-weight: bold;
    font-size: 24px;
    //position: relative;
    //left: 1%;
    line-height: 70px;
    margin: 0 16px;
    text-align: left;
    span {
      padding-left: 16px;
    }
  }
  .moth-flex {
    display: flex;
    //position: relative;
    //left: 40%;
    padding: 20px;
    .month-item-btn {
      width: 80px;
      height: 30px;
      border: 1px solid #dcdee0;
      border-radius: 0px 3px 3px 0px;
      line-height: 30px;
      &:active {
        background: rgba(245,0,29,0.05);
        border: 1px solid #f5001d;
        color: #f5001d;
      }
      &:last-child{
        margin-left: 75px;
      }
    }
  }
}
.details-item {
  width: 98%;
  border: 1px solid #dcdee0;
  margin: 24px;
  padding: 16px 24px;
}
.details-left {
  .left-title {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #2c3749;
    line-height: 28px;
  }
  .details-left-body {
    width: 50%;
    display: flex;
    .left-item-radar {
      width: 60%;
      height: 250px;
    }
    .left-item {
      width: 40%;
      background: #f7f8fa;
      border-radius: 4px;
      padding: 0 16px;
      .left-text {
        font-size: 14px;
        color: #2C3749;
        height: 60px;
        line-height: 60px;
        text-align: left;
        span:first-child {
          color: #6B7A8B;
        }
      }
    }
  }
}
</style>
